<!--
 * @Author: zhuxiaoyi
 * @Date: 2021-11-01 18:02:35
 * @LastEditor: zhuxiaoyi
 * @LastEditTime: 2023-06-02 16:37:29
 * @Description: 
-->
<template>
    <el-pagination class="table-pagination" v-model:currentPage="pagination.page_index" :page-sizes="[10, 30, 50, 100]"
        :page-size="pagination.page_size" :layout=layout
        :total="pagination.page_total" @size-change="handleSizeChange" @current-change="handleCurrentChange" >
    </el-pagination>
</template>

<script>

import { defineComponent, reactive, ref, toRefs } from 'vue'

export default defineComponent({
    name: 'pagination',
    props: {
        pagination: {
            type: Object,
            required: true,
        },
        layout: {
            type: String,
            required: false,
            default:'total,  sizes, ->,prev, pager,next, jumper'
        },
        

    },
    setup(props, context) {
        const data = reactive({
        })
        const handleSizeChange = (val) => {
            context.emit('handleSizeChange', val)
        }
        const handleCurrentChange = (val) => {
            context.emit('handleCurrentChange', val)
        }
        return {
            handleSizeChange,
            handleCurrentChange,
            ...toRefs(data)
        }
    },

})

</script>

<style lang="scss" scoped>

</style>
<style lang="scss">

</style>